<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
关于url中#的作用:
* 学习: http://www.ruanyifeng.com/blog/2011/03/url_hash.html
* #代表网页中的一个位置。其右面的字符，就是该位置的标识符
* 改变#不触发网页重载
* 改变#会改变浏览器的访问历史
* window.location.hash读取#值
* window.onhashchange = func 监听hash改变
-->
  <a href="#/test1">hash test1</a><br><br>
  <a href="#/test2">hash test2</a><br><br>
  <button id="test3">hash test3</button><br><br>
  <button id="test4">hash test4</button><br><br>
  <script type="text/javascript">
      document.getElementById('test3').onclick = function () {
        console.log(window.location.hash);
        window.location.hash = '#/test3'
      }

      document.getElementById('test4').onclick = function () {
        console.log(window.location.hash);
        window.location.hash = '#/test4'
      }
      window.onhashchange = function () {
        console.log('hash改变了: '+location.hash)
      }
  </script>
</body>
</html>